<template>
  <div ref="proTableWarpRef" class="proTable_warp">
    <el-button class="showDetail" size="small" type="primary" v-if="props.attr?.showDetail" @click="show">详情</el-button>
    <div class="proTable" >
      <!-- 搜索框 -->
      <div ref="searchRef" v-if="props.attr?.tableSearchbar">
        <slot name="search"></slot>
      </div>
      <!-- 表格主体 -->
      <div ref="tableRef">
        <slot name="table" :height="tableHeight" ref="tableRef"></slot>
      </div>
      <!-- 分页 -->
      <Page v-if="props.attr?.tablePage" :page="page" @pageChange="pageChange" class="page" :small="small"></Page>
    </div>

    <!-- 弹出框 -->
    <el-dialog draggable v-model="detailDialog.visable" width="80%" :title="props.attr?.dialogTitle || detailDialog.title"
      destroy-on-close>
      <div class="proTable">
        <!-- 搜索框 -->
        <div ref="searchRef" v-if="props.attr?.dialogSearchBar">
          <slot name="search"></slot>
        </div>
        <!-- 表格主体 -->
        <div ref="tableRef">
          <slot name="table" :height="tableHeight" ref="tableRef"></slot>
        </div>
        <!-- 分页 -->
        <Page v-if="props.attr?.dialogPage" :page="page" @pageChange="pageChange" class="page" :small="small"></Page>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import Page from '_c/page/index.vue'
import { getDocumentSize } from '../utils/utils'
const State = reactive({
  searchHeight: 0, // 搜索框高度
  pageHeight: 56, // 分页高度
  docWidthAndHeight: { width: 0, height: 0 },
})
const emit = defineEmits(['pageChange'])
const tableRef = ref(null)
const searchRef = ref(null) 
const proTableWarpRef = ref(null)
const tableHeight = computed(() => {
  let height = 50
  if (props.attr.tablePage)
    height =
      State.docWidthAndHeight.height -
      State.pageHeight -
      State.searchHeight  
  else
    height = State.docWidthAndHeight.height -   State.searchHeight  
  return height
})
onMounted(() => {
  docWidthAndHeight()
})
const docWidthAndHeight = () => {
  let obj = proTableWarpRef.value.getBoundingClientRect()
  //  proTable内部高度
  let WH = { width: obj.width, height: obj.height }
  State.docWidthAndHeight = WH
  window.addEventListener('resize', function () {
    let obj = proTableWarpRef.value.getBoundingClientRect()
    WH = { width: obj.width, height: obj.height }
    State.docWidthAndHeight = WH
  })
}
const detailDialog = reactive({
  visable: false,
  title: '详情',
})
// 接收参数
/**
 * attr:{
 * showDetail:Boolean ,// 是否展示【详情】按钮
 * tableSearchbar :Boolean ,// tabele是否展示【搜索】栏
 * tablePage:Boolean ,// tabele是否展示【分页】
 * dialogTitle:String,// dialog的标题，
 * dialogSearchBar: :Boolean ,// dialog 是否展示【搜索】栏
 * dialogPage:Boolean ,// dialog是否展示【分页】
 * }
 */
const props = defineProps({
  page: Object, // 分页
  small: Boolean,
  attr: Object, //
})
const pageChange = function (page) {
  emit('pageChange', page)
}
// 展示详情
const show = () => {
  detailDialog.visable = true
}

useResizeObserver(searchRef, (entries) => {
  const entry = entries[0]
  const { height } = entry.contentRect
  State.searchHeight = height
})
 

</script>
<script>
export default {
  name: 'ProTable',
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
